<template>
  <div class="containerOverview" id="mainLayout">
    <div class="leftContainer"></div>
    <div class="centerContainer">
      <div class="centerContainerBottom" id="containerCesium" style="width: 100%; height: 700px"></div>
      <div class="centerContainerBottomSeg" style="display: flex; justify-content: center">
        <el-radio-group v-model="tabsValue" style="margin: 0 auto" @change="selectSemented">
          <el-radio-button :label="item" v-for="item in monthList" :key="item">{{ item }}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="rightContainer">
      <div style="height: 270px" ref="rightEcharts1" id="rightEcharts1"></div>
      <div style="height: 270px" ref="rightEcharts2" id="rightEcharts2"></div>
      <div style="height: 270px" ref="rightEcharts3" id="rightEcharts3"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "@/assets/styles/dataoverview.scss";
import moment from "moment";
import { worldMap } from "@/assets/mapJson/worldMap";
import { nameMapData } from "@/assets/mapJs/common";
//注册中国地图
echarts.registerMap("worldMap", worldMap, {});
import {
  getListPathByFlightType,
  getDict,
} from "@/api/service";
export default {
  name: "",
  data() {
    return {
      tabsValue: "",
      dataVolumes: [],
      hotDoatData: [], //热力图数据
      listDatas: [],
      monthList: [],
      marks: [
        {
          label: "一月",
          value: 1,
        },
        {
          label: "二月",
          value: 2,
        },
        {
          label: "三月",
          value: 3,
        },
        {
          label: "四月",
          value: 4,
        },
        {
          label: "五月",
          value: 5,
        },
        {
          label: "六月",
          value: 6,
        },
        {
          label: "七月",
          value: 7,
        },
        {
          label: "八月",
          value: 8,
        },
        {
          label: "九月",
          value: 9,
        },
        {
          label: "十月",
          value: 10,
        },
        {
          label: "十一月",
          value: 11,
        },
        {
          label: "十二月",
          value: 12,
        },
      ],
      sjzl: 0,
      barChartsData: { label: [], value: [] },
      rabarChartsData: [],
      mapGeoData: null,
      forChartsMapData: [],
      echartsData: [],
      selectStartMonth: moment().startOf("month").format("YYYY-MM-DD"),
      selectEndMonth: moment().endOf("month").format("YYYY-MM-DD"),
      graph: null,
      data: [],
      pieChartsData: [],
      frequencyData: [],
      frequencyDataBar: {
        frequencyNames: [],
        frequencyNums: [],
      },
      pieData: [],
      wordChartsData: [],
    };
  },
  mounted() {
    getDict("sys_target_type").then((res) => {
      console.log("frequencyData", res.data);
      if (res.code === 200) {
        this.frequencyData = res.data;
      }
    });

    //态势图


  },
  methods: {
    selectSemented() { },
    initEchartsHot() {
      //中间热力图
      const heatMap = echarts.init(this.$refs.heatMap);
      let heatMapOption = {
        backgroundColor: "#0e2e50",
        title: {
          // text: '热力图',
          subtext: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `经度: ${params?.value[0]}<br />纬度: ${params?.value[1]}`;
          },
        },
        visualMap: {
          show: true,
          type: "continuous",
          min: 0,
          max: 10,
          calculable: true,
          orient: "vertical",
          left: "left",
          bottom: "15%",
          dimension: 1,
          inRange: {
            color: ["blue", "yellow", "red"],
          },
        },
        nameMap: nameMapData,
        geo: {
          map: "worldMap",
          label: {
            emphasis: {
              show: false,
            },
          },
          regions: [
            {
              name: "211",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
                fontSize: 0,
              },
            },
          ],
          // 把中国地图放大了1.2倍
          zoom: 8, //15
          roam: true,
          center: [134.775265, 38.849163],
          itemStyle: {
            normal: {
              areaColor: "rgba(20, 41, 87,0.6)",
              borderColor: "#195BB9",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: this.hotDoatData,
            pointSize: 10, //设置热力图上的点大小
            symbolSize: 200,
            blurSize: 10,
            // progressive: 400
          },
          {
            // name: '基地',
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(this.forChartsMapData),
            colorBy: "data",
            zlevel: 2,
            rippleEffect: {
              color: "#7ed3f4",
              period: 4,
              scale: 4,
              brushType: "stroke",
            },
            symbolSize: 6,
            symbol: "circle",
            label: {
              normal: {
                show: true, //显示市区标签
                textStyle: { color: "#ccc", fontSize: "16px" }, //省份标签字体颜色
                formatter: (params) => {
                  return params?.data?.[3];
                },
                position: ["-130%", "150%"],
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: false, //关闭文字 （这东西有问题得关）
                textStyle: { color: "transparent" },
              },
            },
          },
        ],
      };
      document.getElementById("heatMap").removeAttribute("_echarts_instance_");
      heatMap.setOption(heatMapOption);
    },
    filterData(value) {
      let data =
        this.frequencyData &&
        this.frequencyData.filter((item) => {
          return item?.dictValue == value;
        });
      console.log("filterData", data[0]?.dictLabel, frequencyData);
      return data[0]?.dictLabel;
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.mapGeoData[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
      }
      return res;
    },
    //频率
    //获取飞行航迹的展示
    handleGetListPathByFlightType(params) {
      getListPathByFlightType(params).then((res) => {
        if (res.code == 200) {
          let dataSouce3 = [];
          let dataSouce2 = res?.data
            ?.map((item) => {
              return item?.locationList?.map((iten) => {
                return [iten?.longitude, iten?.latitude, undefined];
              });
            })
            .filter((itex) => {
              return itex;
            })
            .map((itey) => {
              console.log(2222, itey);
              return dataSouce3.push(...itey);
            });
          // console.log("hotDoatData:", dataSouce3);
          this.hotDoatData = dataSouce3;
          this.initEchartsHot();
        }
      });
    },
  },
};
</script>
<style scoped>
::v-deep .el-statistic .con .number {
  color: #c4ebff;
}

::v-deep .topH2Style .con .number {
  font-size: 32px;
}
</style>
